<template>
  <div @click="$emit('toggle-show-lyric')" class="player-con">
        <img src="https://s3.music.126.net/mobile-new/img/needle-ab.png?4b81da043356110081e5ccaed2e6f2ad=&param=200y200"
 alt="" class="needle" :class="{active:paused}">
    <div class="player-con-disc">
      <div class="current-icon">
        <img :src="picUrl+'?param=500y500'" alt="" :class="{'paused':paused}">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:['currentMusic','paused','picUrl'],
}
</script>

<style scoped lang="less">
.player-con{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70vh;
  position: relative;
  margin-top: -30px;
  .needle{
    position: absolute;
    top: 25px;
    left: 44%;
    right: 0;
    height: 130px;
    z-index: 10;
    transform-origin: left top;
    transition: transform 1s;
       transform: rotate(-5deg);
    &.active{
      transform: rotate(-30deg);
    }
  }
  .player-con-disc{
    margin-top: 10%;
    width: 70vw;
    height: 70vw;
    background-color: #101013;
    border-radius: 50%;
    box-shadow: 0px 0px 0px 5px rgba(143, 142, 142, 0.2);
    display: grid;
    place-content: center;
    text-align: center;
    .current-icon{
      img{
        animation: rotation 10s linear infinite;
        border-radius: 50%;
        width: 70%;
        border: 2px solid black;
      }
      img.paused{
        animation-play-state: paused ;
      }
      border-radius: 50%;
    }
  }
}

@keyframes  rotation {
  0%{-webkit-transform:rotate(0deg);}

  50%{-webkit-transform:rotate(180deg);}

  100%{-webkit-transform:rotate(360deg);}
}
</style>